.ss-toc {
  @include mobile {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    background-color: $background-color-body;
    z-index: $z-index-overlay-gt;

    transform: translateX(-100%);
    transition: 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86) 0s;

    &.-show {
      display: block;
      transform: translateX(0);
      box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
    }
  }

  .drawer-body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;

    @include mobile {
      padding: 24px 16px 0 16px;
    }
  }

  .drawer-handle {
    display: none;

    @include mobile {
      display: flex;
    }

    $handle-width: 30px;

    position: absolute;
    top: 80px;
    right: - $handle-width;
    width: $handle-width;
    height: $handle-width;
    justify-content: center;
    align-items: center;
    background-color: $background-color-body;
    box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, .15),
    5px 0px 5px -5px rgba(0, 0, 0, .15);
    border-radius: 0 4px 4px 0;
    z-index: $z-index-overlay-gt+1;

    .icon-menu {
      display: block;
    }

    .icon-close {
      display: none;
    }

    &.-show {
      .icon-menu {
        display: none;
      }

      .icon-close {
        display: block;
      }
    }
  }

  .header {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ss-project_list_card {
      margin-left: 12px;
    }
  }

  .body {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      margin-left: 16px;
    }

    >ul {
      margin-left: 0;
    }

    .item {
      .leaf-section {
        display: none;
      }

      .arrow {
        transform: scale(0.7) rotate(-90deg);
        transition: transform .4s;
      }

      &.-show {
        >.link>.arrow {
          transform: scale(0.7) rotate(0);
        }

        >.leaf-section {
          display: block;
        }
      }
    }

    .link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      cursor: pointer;

      a {
        display: block;
        flex-grow: 1;
        padding: 12px;
      }

      .arrow {
        display: block;
        flex-grow: 0;
      }
    }

    .link:hover {
      color: $menu-link-color;
    }

    .-current {
      background-color: $menu-link-color;
      color: $menu-link-color-bg;

      &.link:hover {
        color: $menu-link-color-bg;
      }
    }
  }
}


.ss-toc-list-card {
  position: relative;

  .icon {
    cursor: pointer;
  }
}

.ss-tooltip {
  display: none;
  padding: 16px 24px;

  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.20);
  border-radius: 2px;

  &.-active {
    display: block;
    position: absolute;
    // top
    // left
  }

  .toc-list {
    min-width: 130px;

    margin-bottom: 24px;
    &:last-of-type {
      margin-bottom: 0;
    }

    .title {
      margin: 0;
      padding-bottom: 8px;
      font-size: 16px;
      border-bottom: 1px solid $card-border-color;
    }

    .list {
      margin: 0;
      margin-top: 8px;
      padding: 0;
      list-style: none;
    }

    .item {
      margin-top: 8px;
      font-size: 14px;
      cursor: pointer;

      &:hover {
        color: $text-color-hover;
      }
    }
  }
}